<template>
  <div class="UserBox">
    <!-- 个人资料 -->
    <div class="information flex">
      <span class="name">{{name}}</span>
    </div>

    <!-- 订单 -->

    <el-row>
      <el-col :span="11" >
        <div class="grid-content bg-purple">
          <h3>酒店订单</h3>

          <el-table :data="hotelOrder" border style="width: 100%">
            <el-table-column prop="Hotel" label="名称" ></el-table-column>
            <el-table-column prop="star_time" label="日期" ></el-table-column>

            <el-table-column  width="130" prop="click" label="操作">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">取消订单</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- <div class="order" v-for="(item,index) in hotelOrder" :key="item.id">
            <span class="title">{{item.Hotel}}</span>
            <el-button type="success" @click="cancel_Hotel_Order(item.HotelID,index)">取消订单</el-button>
          </div>-->
        </div>
      </el-col>
      <el-col :span="12" :offset="1">
        <div class="grid-content bg-purple-light">
          <h3>门票订单</h3>
          <el-table :data="ticketOrder" border style="width: 100%">
            <el-table-column prop="Ticket" label="名称" ></el-table-column>
            <el-table-column prop="star_time" label="日期" ></el-table-column>

            <!-- <el-table-column prop="click" label="操作"></el-table-column> -->
            <el-table-column  width="130" prop="click" label="操作">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">取消订单</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- <div class="order" v-for="(item,index) in ticketOrder" :key="item.id">
            <span class="title">{{item.Ticket}}</span>
            <el-button type="success" @click="cancel_Ticket_Order(item.TicketsID,index)">取消订单</el-button>
          </div>-->
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import imgBox from "@/components/imgBox/imgBox";
export default {
  data() {
    return {
      name: null,
      hotelOrder: null,
      ticketOrder: null
    };
  },
  components: {
    imgBox
  },
  created: function() {
    //加载名称  本地缓存
    this.name = localStorage.getItem("user_name");

    this.$api.orderAPI
      .get_userOrder()
      .then(res => {
        this.hotelOrder = res.data.data.hotelOrder;
        this.ticketOrder = res.data.data.ticketOrder;
      })
      .catch(err => {});

    //   console.log(typeof(userObj))
    //加载订单  api

    // this.upPage(1);
  },
  methods: {
    handleClick(row) {
      var index_;
      if (row.HotelID != null) {
        for (let index = 0; index < this.hotelOrder.length; index++) {
          const element = this.hotelOrder[index];
          if (element == row) {
            index_ = index;
            break;
          }
        }
        this.cancel_Hotel_Order(row.HotelID, index_);
      } else if (row.TicketsID != null) {
        for (let index = 0; index < this.ticketOrder.length; index++) {
          const element = this.ticketOrder[index];
          if (element == row) {
            index_ = index;
            break;
          }
        }
        this.cancel_Ticket_Order(row.TicketsID, index_);
      }
    },
    cancel_Hotel_Order(id, index) {
      var d = { id: id };

      this.$confirm("是否取消订单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api.orderAPI.post_hotelReserve(d);

          this.hotelOrder = this.hotelOrder
            .slice(0, index)
            .concat(this.hotelOrder.slice(index + 1, this.hotelOrder.length));

          this.$message({
            type: "success",
            message: "取消订单!"
          });
        })
        .catch(() => {});
    },
    cancel_Ticket_Order(id, index) {
      var d = { id: id };

      this.$confirm("是否取消订单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api.orderAPI.post_ticketReserve(d);
          // this.ticketOrder = this.ticketOrder.splice(index - 1, 1);
          this.ticketOrder = this.ticketOrder
            .slice(0, index)
            .concat(this.ticketOrder.slice(index + 1, this.ticketOrder.length));
          this.$message({
            type: "success",
            message: "取消订单!"
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss">
.information {
  padding: 20px;
  .name {
    font-size: 30px;
    font-weight: 500;
  }
  button {
  }
}
</style>